// pages/Search.tsx
"use client";

import { useState, useEffect } from "react";
import Link from "next/link";
import SearchBar from "@/components/SearchBar";
import axios from "axios";
import SpeciesGallery from "@/components/SpeciesGallery";
import { DefaultOptionType } from "antd/es/select";
import { Radio, Spin } from "antd";
import axiosInstance from "@/utils/axios";

export default function Search() {


    const [initialOptions, setInitialOptions] = useState<DefaultOptionType[]>(
        []
    );
    const [loadingOptions, setLoadingOptions] = useState(true);
    const [mode, setMode] = useState<"single" | "multi">("single");

    const [loading, setLoading] = useState(false);

    const [results, setResults] = useState([]);
    const [loadingResults, setLoadingResults] = useState(false);

    useEffect(() => {
        const fetchInitialOptions = async () => {
            try {
                const res = await axiosInstance.get(
                    "/species/getOptions",
                    {
                        params: {
                            column: "human_gene",
                        },
                    }
                );
                setInitialOptions(res.data.data || []);
            } catch (err) {
                console.error("fetch initial options error:", err);
                setInitialOptions([]);
            } finally {
                setLoadingOptions(false);
            }
        };
        fetchInitialOptions();
    }, []);

    const handleSearch = async (selectedValue: string) => {
        setLoadingResults(true);
        try {
            // 假设后端搜索接口：GET /api/search?target=<selectedValue>
            const res = await axiosInstance.post(
                `/species/getByTargetGene`,
                {
                    page:1, 
                    pageSize: 10, 
                    searchParams: {
                        humanGene: selectedValue,
                    } 
                }
            );
            setResults(res.data.data || []);
        } catch (err) {
            console.error("search error:", err);
            setResults([]);
        } finally {
            setLoadingResults(false);
        }
    };


    return (
        <div className="container mx-auto py-8">
            <div className="flex items-center space-x-4 mb-6">
                <Radio.Group
                    value={mode}
                    onChange={(e) => setMode(e.target.value)}
                    optionType="button"
                    buttonStyle="solid"
                >
                    <Radio.Button value="single">Single Species</Radio.Button>
                    <Radio.Button value="multi">Multi Species</Radio.Button>
                </Radio.Group>

                <div className="flex-1">
                    {/* 如果初始选项还没加载完，就先给一个加载指示 */}
                    {loadingOptions ? (
                        <div className="text-center py-4">
                            <Spin size="large" />
                        </div>
                    ) : (
                        <SearchBar
                            initialOptions={initialOptions}
                            onSearch={handleSearch}
                        />
                    )}
                </div>
            </div>
            <SpeciesGallery
                speciesList={results}
                multiMode={mode === "multi"}
            />
        </div>
    );
}
